<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="120"
        :model="form"
        :rules="rules"
    >
        <n-grid cols="1" x-gap="24">
            <n-gi>
                <n-form-item label="所属七牛账号" path="qiniuId">
                    <jb-select
                        v-model:value="form.qiniuId"
                        url="/api/admin/qiniu/options"
                        filterable
                        placeholder="=请选择="
                        class="w-140px"
                    >
                    </jb-select>
                </n-form-item>
                <n-form-item label="所属地区" path="region">
                    <jb-select
                        v-model:value="form.region"
                        url="/api/admin/dictionary/options?typeKey=qiniu_region"
                        filterable
                        placeholder="=请选择="
                        class="w-140px"
                    >
                    </jb-select>
                </n-form-item>
                <n-form-item label="bucket名称" path="name">
                    <n-input
                        v-model:value="form.name"
                        placeholder="请输入bucket名称"
                        :disabled="!active"
                    />
                </n-form-item>
                <n-form-item label="编码SN" path="sn">
                    <n-input v-model:value="form.sn" placeholder="请输入编码SN" />
                </n-form-item>
                <n-form-item label="有效期(秒)" path="expires">
                    <n-input
                        v-model:value="form.expires"
                        placeholder="请输入有效期"
                    /><span class="ml-5">秒</span>
                </n-form-item>
                <n-form-item label="绑定域名" path="domainUrl">
                    <n-input
                        v-model:value="form.domainUrl"
                        placeholder="请输入绑定域名"
                    />
                </n-form-item>
            </n-gi>
            <n-gi>
                <n-form-item label="回调地址">
                    <n-input
                        v-model:value="form.callbackUrl"
                        placeholder="请输入回调地址"
                    />
                </n-form-item>
                <n-form-item label="回调body定义">
                    <div class="flex-col w-full">
                        <n-input
                            v-model:value="form.callbackBody"
                            placeholder="请输入回调body定义"
                        />
                        <span
                            class="mt-1 cursor-pointer"
                            style="color: cornflowerblue"
                            @click="useDefaultValue"
                            >点击使用默认值</span
                        >
                    </div>
                </n-form-item>
                <n-form-item label="回调Body类型">
                    <n-select
                        v-model:value="form.callbackBodyType"
                        placeholder="=请选择="
                        filterable
                        class="w-140px"
                        :options="callbackBodyTypeOptions"
                    >
                    </n-select>
                </n-form-item>
                <n-form-item label="是否默认">
                    <n-radio-group v-model:value="form.isDefault" name="isDefault">
                        <n-space>
                            <n-radio :value="true"> 是 </n-radio>
                            <n-radio :value="false"> 否 </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item label="备注">
                    <n-input
                        v-model:value="form.remark"
                        type="textarea"
                        placeholder="请输入备注"
                    />
                </n-form-item>
            </n-gi>
        </n-grid>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface BucketType {
    id: string
    qiniuId: string
    region: string
    name: string
    sn: string
    expires: string
    domainUrl: string
    callbackUrl: string
    callbackBody: string
    callbackBodyType: string
    isDefault: boolean
    remark: string
}
const form = useResetableData<BucketType>({
    id: '',
    qiniuId: '',
    region: '',
    name: '',
    sn: '',
    expires: '',
    domainUrl: '',
    callbackUrl: '',
    callbackBody: '',
    callbackBodyType: '',
    isDefault: false,
    remark: ''
})
const rules: FormRules = {
    qiniuId: new Rules().required('请选择所属七牛账号').value,
    region: new Rules().required('请选择所属地区').value,
    name: new Rules().required('请输入bucket名称').value,
    sn: new Rules().required('请输入编码SN').value,
    expires: new Rules().required('请输入有效期').value,
    domainUrl: new Rules().required('请输入回调地址').value
}
const active = ref(true)
const callbackBodyTypeOptions = [
    {
        label: 'application/json',
        value: 'application/json'
    },
    {
        label: 'application/x-www-form-urlencoded',
        value: 'application/x-www-form-urlencoded'
    }
]
function useDefaultValue() {
    form.callbackBody =
        '{"key":"$(key)","hash":"$(etag)","bucket":"$(bucket)","fsize":$(fsize)}'
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id
        ? '/api/admin/qiniuBucket/update'
        : '/api/admin/dictionaryType/save'
    await JBoltApi.tryPost(url, form)
    await window.$success('保存成功')
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/qiniuBucket/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            form._reset(result.data)
        }
    )
}

onMounted(() => {
    if (props.id) {
        active.value = false
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
